<template>
  <!-- 左边菜单栏 -->
  <div style="display: flex">
    <div v-if="isCollapse" @click="changeIsCollapse(false)"
         class="acccount-tree-open-icon acccount-tree-open-icon-hidden"
         :class="!isCollapse ? 'acccount-tree-open-icon-closed' : ''">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24"
           class="dls-icon"
           focusable="false">
        <path fill="currentColor"
              d="M22 3H2v2h20V3zm-6 5.5H2v2h14v-2zm0 5.5v2H2v-2h14zm6 5.5H2v2H2v2zm.033-7.638a.6.6 0 0 1 0 .876l-3.323 3.115a.6.6 0 0 1-1.01-.438v-6.23a.6.6 0 0 1 1.01-.438l3.323 3.115z"></path>
      </svg>
    </div>
    <div class="datacenter-navigation" :class="isCollapse ? 'datacenter-navigation-closed' : ''">
      <div class="header-bar">
        <div class="account-name">{{ userInfo.userName }}</div>
        <div style="width: 62px; display: flex; align-items: center; justify-content: space-between">
          <i class="el-icon-search" style="font-weight: 600; font-size: 16px"></i>
          <i class="el-icon-sort" style="font-weight: 600; font-size: 16px"></i>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24" class="dls-icon icon" focusable="false" @click="changeIsCollapse(true)">
            <path fill="currentColor"
                  d="M2 3h20v2H2V3zm6 5.5h14v2H8v-2zM8 14v2h14v-2H8zm-6 5.5h20v2H2v-2zm-.033-7.638a.6.6 0 0 0 0 .876l3.323 3.115a.6.6 0 0 0 1.01-.438v-6.23a.6.6 0 0 0-1.01-.438l-3.323 3.115z"></path>
          </svg>
        </div>
      </div>
      <p style="display: flex; color: #282c33; margin: 12px 0; padding: 0 20px; font-size: 12px;">共{{ headerList.length }}个计划</p>
      <div class="one-ui-pro-account-tree-switch-panel-swtich-box">
        <span @click="form.promotionType='推广业务'"
              :class="form.promotionType == '推广业务' ? 'one-ui-pro-account-tree-switch-panel-swtich-box-text-active' : ''"
              class="one-ui-pro-account-tree-switch-panel-swtich-box-btn">推广业务</span>
        <span @click="form.promotionType='营销目标'"
              :class="form.promotionType == '营销目标' ? 'one-ui-pro-account-tree-switch-panel-swtich-box-text-active' : ''"
              class="one-ui-pro-account-tree-switch-panel-swtich-box-btn">营销目标</span>
      </div>
      <div class="leftMenu" style="margin: 12px">
        <el-tree :data="headerList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
    </div>
    <div style="margin: 20px; min-width: 1080px; width: 100%">
      <div class="fc-manage-dashboard-level-info">
        <div class="fc-manage-dashboard-level-info-account">
          <div class="one-breadcrumb one-breadcrumb-medium one-breadcrumb-normal"><span><span class="one-breadcrumb-link"><span>账户 - {{ userInfo.userName }}</span></span><span class="one-breadcrumb-separator"></span></span></div>
          <button @click="btnXiu"
                  style="width: 32px; height: 32px; margin-left: 12px"
                  type="button"
                  class="one-button refresh-operation one-main one-button-normal one-button-medium">
            <span>
              <div class="one-loading-nested-loading one-loading-nested-loading-normal">
                <div class="one-loading-container">
                  <svg style="width: 16px;height: 16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                       class="dls-icon" focusable="false">
                    <path fill="currentColor" d="M11.973 1C5.953 1 1.092 5.936 1.092 12h2c0-4.982 3.987-9 8.881-9 2.717 0 5.153 1.237 6.785 3.192l-.576.333a.5.5 0 0 0 .048.89l2.803 1.241a.5.5 0 0 0 .698-.391l.413-3.098a.5.5 0 0 0-.746-.499l-.887.512C18.521 2.638 15.438 1 11.973 1zm11.119 11c0 6.064-4.861 11-10.882 11-3.465 0-6.548-1.637-8.538-4.18l-.887.512a.5.5 0 0 1-.746-.5l.413-3.097a.5.5 0 0 1 .698-.391l2.804 1.242a.5.5 0 0 1 .047.89l-.576.334C7.057 19.764 9.493 21 12.21 21c4.894 0 8.882-4.018 8.882-9h2z"></path>
                  </svg>
                </div>
              </div>
            </span>
          </button>
        </div>
        <div class="fc-manage-dashboard-level-info-content">
          <div class="level-info-content-item">
            <div class="title">客户权益</div>
            <el-rate
                :max="3"
                v-model="customerBenefitsNumber"
                disabled
                show-score
                :colors="color"
                text-color="#ff9900"
                score-template="">
            </el-rate>
          </div>
          <div class="level-info-content-item">
            <div class="title">状态</div>
            <div class="brave-the-winds-common-libs-table-list-columns-status" style="font-size: 14px">
              <span class="status-dot status-dot-warning" v-if="userInfo.balance == 0"></span>
              余额为{{ userInfo.balance !== 0 ? userInfo.balance : '零' }}
            </div>
          </div>
          <div class="level-info-content-item">
            <div class="title">推广余额</div>
            <span class="balance-info" style="font-size: 14px">{{ userInfo.searchBalance }}</span>
            <button type="button" @click="btnXiu" class="one-button change-btn one-main one-button-normal one-button-medium">
              <span>充值</span>
            </button>
          </div>
          <div class="level-info-content-item">
            <div class="title">预算</div>
            <a class="one-text-link one-text-link-midium one-text-link-normal one-text-link-is-a-tag" target="_self" style="font-size: 14px">不限定预算</a>
          </div>
          <div class="level-info-content-item">
            <div class="title" style="font-size: 14px">地域</div>
            <a class="one-text-link one-text-link-midium one-text-link-normal one-text-link-is-a-tag" target="_self" style="font-size: 14px">全部地域</a>
          </div>
        </div>
        <button
            class="light-ai manage-center-qingge-migration-link-btn light-ai-button light-ai-button-small light-ai-button-strong light-ai-button-strong-small"
            type="button">
          <svg fill="none" viewBox="0 0 56 56" class="dls-icon" focusable="false">
            <image height="56" min-width="56" href="https://fc-feed.bj.bcebos.com/aix/ai.webp"></image>
          </svg>
          <span>一键试投轻舸</span>
        </button>
      </div>
      <div class="manage-dashboard-main-workspace leftMenu2">
        <div class="fc-manage-dashboard-navigation">
          <div class="one-menu-inline-box one-menu-inline-medium fc-manage-dashboard-navigation-menu"
               style="width: 110px;min-height: calc(100vh - 155px);height: 100%">
            <el-menu :default-active="activeIndex" router class="el-menu-vertical-demo-right" @open="handleOpen" @close="handleClose">
              <el-menu-item index="/managecenter/overview" @click="updateActiveItem('/managecenter/overview')">
                <span>账户概括</span>
              </el-menu-item>
              <el-menu-item index="/managecenter/optimizecenter" @click="updateActiveItem('/managecenter/optimizecenter')">
                <span>优化中心</span>
              </el-menu-item>
              <el-menu-item  @click.native.stop="btnXiu">
                <span>行业洞察</span>
              </el-menu-item>
              <el-menu-item index="/managecenter/projects" @click="updateActiveItem('/managecenter/projects')">
                <span>项目</span>
              </el-menu-item>
              <el-menu-item index="/managecenter/campaigns" @click="updateActiveItem('/managecenter/campaigns')">
                <span>计划</span>
              </el-menu-item>
              <el-menu-item index="/managecenter/adgroups" @click="updateActiveItem('/managecenter/adgroups')">
                <span>单元</span>
              </el-menu-item>
              <el-submenu index="定向" :class="{ 'active-parent-menu': isActiveParent('/managecenter/keyword', '/managecenter/crowd') }">
                <template slot="title">
                  <span>定向</span>
                </template>
                <el-menu-item index="/managecenter/keyword" @click="updateActiveItem('/managecenter/keyword')">
                  <span>关键词</span>
                </el-menu-item>
                <el-menu-item index="/managecenter/crowd" @click="updateActiveItem('/managecenter/crowd')">
                  <span>人群</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="创意" :class="{ 'active-parent-menu': isActiveParent('/managecenter/creativesvideos', '/managecenter/textUser') }">
                <template slot="title">
                  <span>创意</span>
                </template>
                <el-menu-item index="/managecenter/creativesvideos" @click="updateActiveItem('/managecenter/creativesvideos')">
                  <span>创意</span>
                </el-menu-item>
                <el-menu-item index="/managecenter/textUser" @click="updateActiveItem('/managecenter/textUser')">
                  <span>创意组件</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="设置" :class="{ 'active-parent-menu': isActiveParent('/managecenter/campaignSettings', '/managecenter/settings') }">
                <template slot="title">
                  <span>设置</span>
                </template>
                <el-menu-item index="/managecenter/campaignSettings" @click="updateActiveItem('/managecenter/campaignSettings')">
                  <span>计划设置</span>
                </el-menu-item>
                <el-menu-item index="/managecenter/settings" @click="updateActiveItem('/managecenter/settings')">
                  <span>账户设置</span>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </div>
        <div class="manage-dashboard-main-workspace-content">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <ul class="ec-fm-bar">
      <li class="ec-fm-item-wrap">
        <div class="ec-fm-item" id="emishuFeedback">
          <div class="ec-fm-item-content">
            <div class="ec-fm-icon">
              <svg focusable="false" min-width="24" height="24" viewBox="0 0 24 24">
                <path fill="currentColor"
                      d="M20.304 4.927a1.121 1.121 0 0 1 0 1.57l-.001-.002-2.147 2.18-4.108-4.171 2.148-2.18a1.083 1.083 0 0 1 1.544 0l2.564 2.603zM2.751 16.114a.5.5 0 0 1 .138-.273L12.953 5.615l4.109 4.174L6.999 20.011a.5.5 0 0 1-.277.143l-4.042.653a.5.5 0 0 1-.573-.57l.644-4.123zm9.906.886h8.355a1 1 0 0 0 0-2h-6.355l-2 2zm8.354 4H8.657l2-2H21.01a1 1 0 0 1 0 2z"></path>
              </svg>
            </div>
            <div class="ec-fm-label">反馈</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getLocalStorageItem } from '@/utils/storage-helper';
import { getPromotionTreeMenuList } from '@/services/model/index';

export default {
  data() {
    return {
      color: ['#ff9100', '#ff9100', '#ff9100'],
      activeNames: [],
      openedMenu: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      activeIndex: '/managecenter/overview',
      activeIndex1: "1-1",
      isCollapse: false,
      userId: getLocalStorageItem('userInfo').userId,
      form: {
        promotionType: '推广业务'
      },
      userInfo: getLocalStorageItem('userInfo'),
      headerList: [{ /* Your headerList data */ }],
      projectId: '',
      selectModel: "",
      filterOptions: [],
    };
  },
  watch: {
    activeProjectId(val) {
      this.projectId = val;
    }
  },
  computed: {
    customerBenefitsNumber() {
      return Number(this.userInfo.customerBenefits) || 0;
    }
  },
  methods: {
    updateActiveItem(index) {
      this.activeIndex = index;
    },
    isActiveParent(...indices) {
      return indices.includes(this.activeIndex);
    },
    handleMenuOpen(key, keyPath) {
      this.openedMenu = keyPath;
      console.log(this.openedMenu);
    },
    handleMenuClose(key, keyPath) {
      this.openedMenu = null;
    },
    handleChange() {
      console.log('Collapse state changed');
    },
    handleNodeClick(data) {
      console.log(data);
    },
    async getPromotionTreeMenu() {
      let { data } = await getPromotionTreeMenuList({ userId: this.userId });
      console.log(data);
      this.headerList = data;
    },
    btnXiu() {
      this.$message('服务器繁忙,请稍后重试！');
      return;
    },
    changeIsCollapse(isCollapse) {
      this.isCollapse = isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  created() {
    this.$on('menu-open', (key, keyPath) => {
      console.log('Menu opened:', key);
    });
    this.$on('menu-close', (key, keyPath) => {
      console.log('Menu closed:', key);
    });
  },
  mounted() {
    this.getPromotionTreeMenu();
  },
};
</script>
<style scoped>
.el-menu-item.is-active,
.active-parent-menu > .el-submenu__title > span, .el-icon-arrow-down {
  color: #0054e6;
}

.active-parent-menu /deep/ .el-submenu__icon-arrow {
  color: #0054e6 !important;
}
</style>
<style lang="less" scoped>

.datacenter-navigation {
  width: 260px;
  transition: all 400ms ease-in-out;
  position: relative;
  top: 1px;
  background: white;

  .header-bar {
    width: 218px;
    display: flex;
    align-items: center;
    padding: 16px 11px 8px 22px;
    border-bottom: 1px solid #e2e6f0;

    .account-name {
      flex: 1;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 24px;
      font-weight: 700;
    }

    .icon {
      padding: 0;
      margin: 0;
      box-sizing: var(--light-ai-box-sizing, border-box);
      display: inline-block;
      width: auto;
      height: 1em;
      fill: currentColor;
      vertical-align: -0.125em;
      cursor: pointer;
      font-size: 14px;
    }
  }
}

.datacenter-navigation-closed {
  width: 0px;

  overflow: hidden;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/deep/ .el-menu-item, /deep/ .el-submenu__title {
  height: 40px;
  line-height: 40px;
  font-size: 14px
}

/deep/ .el-menu-item.is-active {
  color: #0054e6;
  background-color: #ebf2ff;
  font-weight: 500;
  position: relative;

}

.el-menu-item.is-active:after {
  content: '';
  top: 0;
  right: 0;
  width: 0px;
  position: absolute;
  height: 100%;
  transition: background-color 0.2s ease-out;
  background-color: #0054e6;
}

.one-ui-pro-account-tree-switch-panel-swtich-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #EBEDF5;
  border-radius: 4px;
  height: 36px;
  margin: 12px 12px;
}


.one-ui-pro-account-tree-switch-panel-swtich-box-text-active {
  color: #0052CC;
  background-color: #fff;
  width: 50%;
}

.one-ui-pro-account-tree-switch-panel-swtich-box-btn {
  padding: 4px 0;
  line-height: 17px;
  box-sizing: border-box;
  height: 28px;
  font-size: 12px;
  font-weight: 400;
  margin-left: 4px;
  border-radius: 2px;
  flex: 1;
  margin-right: 4px;

  text-align: center;
  cursor: pointer;
}

.fc-manage-dashboard-level-info-container {
  display: flex;
  margin-top: 24px;
  font-size: 14px;
}

.fc-manage-dashboard-level-info {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: 20px 24px;
  border-radius: 6px;
  background: #fff;
}

.fc-manage-dashboard-level-info-account {
  display: flex;
  align-items: center;
}

.one-breadcrumb {
  font-size: 14px;
}

.fc-manage-dashboard-level-info-account .refresh-button {
  margin-left: 12px;
}

.one-button-medium.one-button-icon-only {
  height: 32px;
  width: 32px;
}

.one-button .one-button-icon {
  height: calc(1em + 2px);
}

.one-button-icon-only > svg {
  vertical-align: baseline;
}

.fc-manage-dashboard-level-info .fc-manage-dashboard-level-info-content {
  display: flex;
  margin-top: 8px;

}

.fc-manage-dashboard-level-info .fc-manage-dashboard-level-info-content .level-info-content-item {
  display: flex;
  align-items: center;
  white-space: nowrap;

  margin-left: 24px;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: #ff9100;
  margin-right: 8px;
}

.fc-manage-dashboard-level-info .fc-manage-dashboard-level-info-content .level-info-content-item .title {
  font-weight: 600;
  margin-right: 8px;
  font-size: 14px;

}

.fc-manage-dashboard-level-info .account-degree-container {
  cursor: pointer;
}

.fc-manage-dashboard-level-info .manage-center-qingge-migration-link-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

.fc-manage-dashboard-level-info .balance-extra-info, .fc-manage-dashboard-level-info .change-btn {
  margin-left: 8px;
}

.one-button-normal:hover {
  background-color: #e2e6f0;
}

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}

.one-button-medium {
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.one-button-normal {
  background-color: #ebedf5;
  color: rgba(19, 22, 26, 0.9);
  border: 1px solid transparent;
}

.one-button {
  box-sizing: border-box;
  outline: none;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
  transition-property: border-color, background-color, color, opacity, box-shadow;
  transition-duration: 0.2s;
  cursor: pointer;
  border: 0;
}

.light-ai-button-strong {
  color: #3a5bfd;
  background: #f2f7ff;
}

.light-ai-button-small {
  font-weight: 400;
  font-size: 14px;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
}

.light-ai-button {
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

.light-ai {
  word-break: break-word;
}

.light-ai {
  transition: 0.2s ease;
  transition-property: color, background-color, border-color, outline-color, box-shadow;
}

.one-button-medium.one-button-icon-only {
  height: 32px;
  line-height: 10px;
  width: 32px;
  background: #ebedf5;
  border-radius: 4px;
}
</style>
<style lang="less" scoped>
.manage-dashboard-main-workspace {
  display: flex;
  margin-top: 24px;
  align-content: center;

  .fc-manage-dashboard-navigation {
    position: -webkit-sticky;
    top: 65px;
    background-color: #fff;

    border-radius: 6px;

    .one-menu-inline-box {
      display: inline-block;
      width: 200px;
      padding: 8px 0;
      background-color: #fff;

      .el-menu-vertical-demo-right {
        width: 110px;

        .el-menu-item, .el-submenu__title {
          text-align: center;
        }

        .el-submenu__icon-arrow {
          left: 0px;
        }

        .el-menu--inline {
          .el-menu-item {
            width: 110px;
            min-width: 100px;
            padding-left: 0;
            text-align: center;
          }
        }
      }
    }
  }
}

.manage-dashboard-main-workspace-content {
  position: relative;
  width: calc(100% - 134px);
  margin-left: 24px;
  border-radius: 6px;
}

//反馈
.ec-fm-bar {
  width: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: fixed;
  z-index: 10;
  right: 4px;
  bottom: 100px;
  background-color: #fff;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .06), 0 6px 30px 5px rgba(0, 0, 0, .05), 0 8px 10px -5px rgba(0, 0, 0, .01);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
}

.ec-fm-item-wrap {
  position: relative;
}

.ec-fm-item {
  color: #282c33;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
}

.ec-fm-item-content {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.ec-fm-icon {
  color: #0052cc;
  height: 24px;
}

.ec-fm-item-content {
  padding: 8px;
  border-radius: 15px;
}

.ec-fm-label {
  margin-top: 4px;
}

.acccount-tree-open-icon-hidden {
  position: sticky;
  top: 88px;
  z-index: 20;
  transition: opacity 320ms linear 400ms;
  background: white;
}

.acccount-tree-open-icon {
  position: sticky;
  top: 188px;
  width: 28px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0 6px 6px 0;
  z-index: 999;
  transition: all 320ms linear 400ms;
}

.acccount-tree-open-icon svg {
  width: 14px;
  height: 14px;
  color: white;
}

.dls-icon {
  display: inline-block;
  fill: currentColor;
  vertical-align: -0.125em;
}

.acccount-tree-open-icon-clos账户报告ed {
  width: 0px;
}

.wood-spring-account-tree-affix {
  position: sticky;
  top: 88px;
  z-index: 20;
}

/deep/ .el-rate__icon {
  margin-right: 0px;
}

.leftMenu /deep/ .el-collapse-item__header .el-icon-arrow-right {
  display: none;
}

///* 添加新的 caret-right 图标 */
//.leftMenu/deep/.el-collapse-item__header .el-icon {
//  display: inline-block;
//  font-family: 'element-icons';
//  content: '\e61b'; /* Unicode for el-icon-caret-right */
//}

.el-icon-caret-right, .el-icon-caret-bottom {
  transition: transform 0.3s;
}

.leftMenu /deep/ .el-collapse-item__content {
  padding-bottom: 0px;
  padding-left: 10px;
}

.leftMenu2 /deep/ .is-opened .el-submenu__icon-arrow {
  left: 5px !important;
}

.leftMenu2 /deep/ .el-submenu__icon-arrow {
  left: 5px !important;
}

.leftMenu /deep/ .el-collapse-item__wrap {
  border: 0px;
}


.leftMenu2 /deep/ .el-submenu__title > span {
  margin-left: 5px;
}
</style>
